<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>房屋信息系统</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/upload.css"/>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>

<body>
<div id="wrap">
    <nav class="navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../index.html">Shakespeare</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="../search.html">我是租客</a></li>
                    <li><a href="#">我是房东</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-top navbar-right">
                    <button class="btn1" data-toggle="modal" data-target="#login">
                        登录
                    </button>
                    <button class="btn1" data-toggle="modal" data-target="#register">
                        注册
                    </button>
                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div id="app">
        <component v-bind:is="currentView" v-on:show="showUpload">
            <!-- 组件在 vm.currentview 变化时改变！ -->
        </component>
    </div>
</div>

<br>


<div class="footer">
    <div class="container" style="padding: 20px;">
        <p class="muted credit">Produced By Morroc.</p>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    用户登录
                </h4>
            </div>
            <div class="modal-body">
                <div class="main">
                    <center>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-primary1" id="op1">
                                <input type="radio" name="options"> 我是租客
                            </label>
                            <label class="btn btn-primary1" id="op2">
                                <input type="radio" name="options"> 我是房东
                            </label>
                        </div>
                    </center>
                    <br>
                    <div class="form-group">
                        <label>用户名
                            <input type="text" class="form-control"/>
                        </label>
                    </div>
                    <div class="form-group">
                        <label>密码
                            <input type="password" class="form-control"/>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        登录
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<div class="modal fade" id="register" index="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    新用户注册
                </h4>
            </div>
            <div class="modal-body">
                <div class="main">
                    <div class="center">
                        <center>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary1" id="option1">
                                    <input type="radio" name="options"> 我是租客
                                </label>
                                <label class="btn btn-primary1" id="option2">
                                    <input type="radio" name="options"> 我是房东
                                </label>
                            </div>
                        </center>
                        </br>
                        <div class="form-group">
                            <label>用户名
                                <input type="text" class="form-control"/>
                            </label>
                        </div>
                        <div class="form-group">
                            <label>密码
                                <input type="password" class="form-control"/>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>确认密码
                            <input type="password" class="form-control" placeholder=""/>
                        </label>
                    </div>
                    <div class="form-group">
                        <label>姓名
                            <input type="text" class="form-control"/>
                        </label>
                    </div>

                    <div class="form-group">
                        <label>身份证号码
                            <input type="text" class="form-control"/>
                        </label>
                    </div>
                    <div class="form-con">
                        <label>手机号
                            <input type="text" class="form-control"/>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    注册
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</div>


</div>

<script>
    var op1 = document.getElementById('op1');
    var op2 = document.getElementById('op2');
    op1.onclick = function () {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        op2.style.backgroundColor = '#F8F8F8';
        op2.style.color = 'black';
    };
    op2.onclick = function () {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        op1.style.backgroundColor = '#F8F8F8';
        op1.style.color = 'black';
    };

    var option1 = document.getElementById('option1');
    var option2 = document.getElementById('option2');
    option1.onclick = function () {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        option2.style.backgroundColor = '#F8F8F8';
        option2.style.color = 'black';
    };
    option2.onclick = function () {
        this.style.backgroundColor = '#337ab7';
        this.style.color = 'white';
        option1.style.backgroundColor = '#F8F8F8';
        option1.style.color = 'black';
    }
</script>

<script language="JavaScript" type="text/javascript">
    //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
    var city = [
        ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "顺义区", "通州区", "大兴区", "房山区", "门头沟区", "昌平区", "平谷区", "密云区", "怀柔区", "延庆区"],
        ["越秀区", "荔湾区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "增城区", "从化区"],
        ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区", "闵行区", "宝山区", "嘉定区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"],
        ["福田区", "罗湖区", "南山区", "盐田区", "宝安区", "龙岗区", "坪山区", "龙华区", "光明新区", "大鹏新区"],
    ];

    function getCity() {
        //获得省份下拉框的对象
        var sltProvince = document.form1.province;
        //获得城市下拉框的对象
        var sltCity = document.form1.city;
        //得到对应省份的城市数组
        var provinceCity = city[sltProvince.selectedIndex - 1];

        //清空城市下拉框，仅留提示选项
        sltCity.length = 1;

        //将城市数组中的值填充到城市下拉框中
        for (var i = 0; i < provinceCity.length; i++) {
            sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i]);
        }
    }
</script>
<script src="../js/upload.js"></script>

</body>


</html>